<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: rgb(161, 100, 233);
      overflow: hidden;
      margin: 0;
    }
    .btn {
      cursor: pointer;
      border-radius: 5px;
      border: 0;
      color: #fff;
      margin: 1rem;
      padding: 1.5rem 3rem;
      font-size: 1.2rem;
      background-color: lightblue;
    }
    .btn:hover {
      opacity: 0.9;
    }
    .btn:focus {
      outline: none;
      transform: scale(0.98); 
    }
  </style>
</head>
<body>
  <audio id="applause" src="./sounds/applause.mp3"></audio>
  <audio id="boo" src="./sounds/boo.mp3"></audio>
  <audio id="gasp" src="./sounds/gasp.mp3"></audio>
  <audio id="tada" src="./sounds/tada.mp3"></audio>
  <audio id="victory" src="./sounds/victory.mp3"></audio>
  <audio id="wrong" src="./sounds/wrong.mp3"></audio>
  <div id="button"></div>

  <script>
    const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];

    sounds.forEach(sound => {
      const btn = document.createElement("button");
      btn.classList.add("btn");
      btn.innerHTML = sound;

      btn.addEventListener("click", () => {
        stopSongs();
        document.getElementById(sound).play();

      });

      document.getElementById("button").appendChild(btn);
    });

    function stopSongs() {
      sounds.forEach(sound => {
        const song = document.getElementById(sound);
        song.pause();
        song.currentTime = 0;
      })
    };
  </script>
</body>
</html>